<div class="layui-card-header layui-card">
    <span class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">首页</a>
        <a><cite>代理结算</cite></a>
        <a><cite>申请结算</cite></a>
    </span>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">申请结算</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-form-item">
                    <blockquote class="layui-elem-quote" id="amountTip"></blockquote>
                </div>
                <form class="layui-form center" id="applyForm" style="display: none">
                    <div class="layui-form-item">
                        <label class="layui-form-label">账号类型</label>
                        <div class="layui-input-block">
                            <input type="radio" name="bankAccount" value="0" title="手动录入" checked  lay-filter="bankAccount">
                            <input type="radio" name="bankAccount" value="1" title="开户账户"  lay-filter="bankAccount">
                            <input type="radio" name="bankAccount" value="2" title="银行账户"  lay-filter="bankAccount">
                        </div>
                    </div>
                    <div class="layui-form-item selectBank" hidden>
                        <label class="layui-form-label">账号信息</label>
                        <div class="layui-input-block">
                            <select name="selectBank" id="selectBank">
                                <option value=''>请选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item selectBank default">
                        <label class="layui-form-label bankName"><span class="required" style="color: red">* </span>银行名称</label>
                        <div class="layui-input-block">
                            <input type="text" required placeholder="请输入银行名称" id="bankName" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item selectBank default manual" hidden>
                        <label class="layui-form-label">所在省</label>
                        <div class="layui-input-block">
                            <input type="text" id="province" placeholder="请输入所在省" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item selectBank default manual" hidden>
                        <label class="layui-form-label">所在市</label>
                        <div class="layui-input-block">
                            <input type="text" id="city" placeholder="请输入所在市" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item selectBank default">
                        <label class="layui-form-label">网点名称</label>
                        <div class="layui-input-block">
                            <input type="text" id="bankNetName" placeholder="请输入网点名称" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item selectBank default">
                        <label class="layui-form-label accountName"><span class="required" style="color: red">* </span>姓名</label>
                        <div class="layui-input-block">
                            <input type="text" required placeholder="请输入姓名" id="accountName" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item selectBank default">
                        <label class="layui-form-label accountNo"><span class="required" style="color: red">* </span>卡号</label>
                        <div class="layui-input-block">
                            <input type="text" required placeholder="请输入卡号"  id="accountNo" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">结算金额(元)</label>
                        <div class="layui-input-block">
                            <input type="text" required  name="settAmount"  lay-verify="required|number" placeholder="请输入结算金额" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <input type="hidden" name="feeType" id="feeType">
                    <input type="hidden" name="feeRate" id="feeRate">
                    <input type="hidden" name="feeLevel" id="feeLevel">
                    <input type="hidden" name="drawFeeLimit" id="drawFeeLimit">
                    <div id='currentAuthDivForAuth'></div>
                    <div class="layui-form-item ">
                        <div class="layui-input-block">
                            <button type="button" lay-submit lay-filter="btnJSJ" class="layui-btn">提交申请</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form','util','admin'], function(){
       var form = layui.form
       ,$ = layui.$
       ,admin = layui.admin
       ,element = layui.element;

       element.render('breadcrumb', 'breadcrumb');//渲染导航信息
        var paySecurityType;

        $.genCurrentAuthHtml = function (paySecurityType, googleAuthStatus){
            //alert(1)
            //无需验证
            if(paySecurityType == '0') {
                return "";
                //仅支付密码验证
            }else if(paySecurityType == '1') {
                return `
                    <div class="layui-form-item layui-form-text">
                     <label class="layui-form-label">支付密码</label>
                     <div class="layui-input-block">
                        <input type="password" name="payPassword" required lay-verify="required" placeholder="请输入支付密码" autocomplete="off" class="layui-input">
                     </div>
                   </div>`;
            }else if(paySecurityType == '2') {
                return  `
                       <div class="layui-form-item layui-form-text">
                         <label class="layui-form-label">谷歌验证码</label>
                         <div class="layui-input-block">
                            <input type="text" name="googleCode" required lay-verify="required|number" placeholder="请输入谷歌验证码" autocomplete="off" class="layui-input">
                         </div>
                       </div>`;
                //支付密码 + 安全认证
            }else if(paySecurityType == '3') {
                return `
                   <div class="layui-form-item layui-form-text">
                     <label class="layui-form-label">支付密码</label>
                     <div class="layui-input-block">
                        <input type="password" name="payPassword" required lay-verify="required" placeholder="请输入支付密码" autocomplete="off" class="layui-input">
                     </div>
                   </div>` + `
                   <div class="layui-form-item layui-form-text">
                     <label class="layui-form-label">谷歌验证码</label>
                     <div class="layui-input-block">
                        <input type="text" name="googleCode" required lay-verify="required|number" placeholder="请输入谷歌验证码" autocomplete="off" class="layui-input">
                     </div>
                   </div>`;
            }
        };

        var accountInfo;

        admin.req({
            type: 'get',
            url: layui.setter.baseUrl + '/sett/is_allow_apply',
            error: function(err){
                layer.alert(err.msg,{title:'请求失败'})
            },
            success:function(res){
                if(res.code == 0){
                    if(res.msg.length > 0) {
                        $('#amountTip').html("<span style='color: red'>" + res.msg + "</span>");
                    }else {
                        $("#applyForm").show();
                        admin.req({
                            type: 'get',
                            url: layui.setter.baseUrl + '/account/get',
                            error: function(err){
                                layer.alert(err.msg,{title:'请求失败'})
                            },
                            success:function(res){
                                if(res.code == 0 && res.data != null){
                                    $('#amountTip').html("可结算金额: <span style='color: red'>" + res.data.availableSettAmount / 100 + "</span> 元");
                                }
                            }
                        });

                        admin.req({
                            type: 'get',
                            url: layui.setter.baseUrl + '/agent/get',
                            error: function(err){
                                layer.alert(err.msg,{title:'请求失败'})
                            },
                            success:function(res){
                                if(res.code == 0 && res.data != null){
                                    // $('#bankName').val(res.data.bankName);
                                    // $('#accountName').val(res.data.accountName);
                                    // $('#accountNo').val(res.data.accountNo);
                                    // $('#bankNetName').val(res.data.bankNetName);
                                    // $('#city').val(res.data.city);
                                    // $('#province').val(res.data.province);
                                    $('#feeType').val(res.data.feeType);
                                    $('#feeRate').val(res.data.feeRate);
                                    $('#feeLevel').val(res.data.feeLevel);
                                    $('#drawFeeLimit').val(res.data.drawFeeLimit);
                                    paySecurityType = res.data.paySecurityType;
                                    $("#currentAuthDivForAuth").html($.genCurrentAuthHtml(res.data.paySecurityType, res.data.googleAuthStatus));
                                    if(paySecurityType == 0) {
                                    }else if(paySecurityType == 1) {
                                        $("#payAuthDiv").show();
                                    }else if(paySecurityType == 2) {
                                        $("#googleAuthDiv").show();
                                    }else if(paySecurityType == 3) {
                                        $("#payAuthDiv").show();
                                        $("#googleAuthDiv").show();
                                    }
                                    accountInfo = res.data;
                                }
                            }
                        });
                        admin.req({
                            type: 'get',
                            url: layui.setter.baseUrl + '/agent/apply',
                            error: function(err){
                                layer.alert(err.msg,{title:'请求失败'})
                            },
                            success:function(res){
                                if(res.code == 0 && res.data != null){
                                    var str1="<option value=''></option>";
                                    for (var i = 0; i < res.data.length; i++) {
                                        var str = "";
                                        if(res.data[i].accountType == '1'){
                                            str = "账户类型: 银行卡"+ ' | '
                                                + "银行名称: "+ res.data[i].bankName + ' | '
                                                + "账号名称: "+  res.data[i].accountName + ' | '
                                                + "银行账号: "+  res.data[i].accountNo + " ";
                                        }
                                        if(res.data[i].accountType == '2'){
                                            str = "账户类型: 微信"+ ' | '
                                                + "账号名称: "+  res.data[i].accountName + ' | '
                                                + "微信账号: "+  res.data[i].accountNo + " ";
                                        }
                                        if(res.data[i].accountType == '3'){
                                            str = "账户类型: 支付宝"+ ' | '
                                                + "账号名称: "+  res.data[i].accountName + ' | '
                                                + "支付宝账号: "+  res.data[i].accountNo + " ";
                                        }
                                        str1 = $("<option value="+res.data[i].id+">"+str+"</option>");
                                        $('#selectBank').append(str1);
                                    }
                                    form.render();
                                }
                            }
                        });
                    }
                }
            }
        });





       form.on('submit(btnJSJ)', function(data){
           // 校验
           var payPassword = $("#payPassword").val();
           var googleCode = $("#googleCode").val();
           var modelType = $("input[type='radio']:checked").val();
           var bankAccountId = $("#selectBank").find("option:selected").val();

           var bankName = $("#bankName").val();
           var accountName = $('#accountName').val();
           var accountNo = $('#accountNo').val();
           var bankNetName = $('#bankNetName').val();
           var city = $('#city').val();
           var province = $('#province').val();

           console.log(modelType+"--"+bankAccountId);
           if (modelType == '2'){
               if (bankAccountId == ''){
                   layer.alert("请选择结算账号!", function(index){
                       layer.close(index);
                   });
                   return false;
               }
           }else if (modelType == '0') {
               if (!bankName){
                   layer.msg("银行名称不能为空！")
                   return false;
               }
               if (!accountName){
                   layer.msg("姓名不能为空！")
                   return false;
               }
               if (!accountNo){
                   layer.msg("卡号不能为空！")
                   return false;
               }
           }
           if(paySecurityType == 0) {
           }else if(paySecurityType == 1) {
               if(payPassword == '') {
                   layer.alert("请填写支付密码!", function(index){
                       layer.close(index);
                   });
                   return false;
               }
           }else if(paySecurityType == 2) {
               if(googleCode == '') {
                   layer.alert("请填写谷歌验证码!", function(index){
                       layer.close(index);
                   });
                   return false;
               }
           }else if(paySecurityType == 3) {
               if(payPassword == '') {
                   layer.alert("请填写支付密码!", function(index){
                       layer.close(index);
                   });
                   return false;
               }
               if(googleCode == '') {
                   layer.alert("请填写谷歌验证码!", function(index){
                       layer.close(index);
                   });
                   return false;
               }
           }

           var settAmount = data.field.settAmount;
           var feeType = $('#feeType').val();
           var feeRate = $('#feeRate').val();
           var feeLevel = $('#feeLevel').val();
           var fee = 0;
           if(feeType == 1) {   // 百分比收费

               var drawFeeLimit = $("#drawFeeLimit").val() / 100;
               fee = settAmount * (feeRate / 100);
               fee = fee > drawFeeLimit ? drawFeeLimit : fee;

           }else if(feeType == 2) { // 固定每笔收费
               fee = feeLevel/100;
           }else if(feeType == 3) { // 固定每笔收费+百分比

               fee = feeLevel/100 + settAmount * (feeRate / 100);
               var drawFeeLimit = $("#drawFeeLimit").val()  / 100;
               fee = fee > drawFeeLimit ? drawFeeLimit : fee;
           }
           var conMsg = "申请结算金额:" + settAmount + "元,手续费:" + fee + "元,确定申请么?";
           layer.confirm(conMsg, function(index){
               admin.req({
                   type: 'post',
                   url: layui.setter.baseUrl + '/sett/apply',
                   data: {
                       settAmount: data.field.settAmount,
                       payPassword: data.field.payPassword,
                       googleCode: data.field.googleCode,
                       bankAccountId: bankAccountId,
                       modelType: modelType,
                       bankName: bankName,
                       accountName: accountName,
                       accountNo: accountNo,
                       bankNetName: bankNetName,
                       city: city,
                       province: province
                   },
                   success: function(res){
                       if(res.code == 0){
                           layer.alert(res.msg,{title: "保存成功"},function(index){
                               layer.close(index);
                               location.hash = '/sett/list/';
                           })
                       }
                   }
               });
           });
            return false;//阻止跳转
        });

       form.on('radio(bankAccount)', function(data){
            var checked = data.value;
           if (checked == '1'){
               $("#bankName").val(accountInfo.bankName).attr("disabled", true);
               $('#accountName').val(accountInfo.accountName).attr("disabled", true);
               $('#accountNo').val(accountInfo.accountNo).attr("disabled", true);
               $('#bankNetName').val(accountInfo.bankNetName).attr("disabled", true);
               $('#city').val(accountInfo.city).attr("disabled", true);
               $('#province').val(accountInfo.province).attr("disabled", true);
               $(".required").attr("hidden", "hidden");// 必填*隐藏
               $(".selectBank").attr("hidden", "hidden");  //参数配置隐藏
               $(".default").removeAttr("hidden");
               $(".manual").removeClass("layui-hide");

               $(".accountNo").html("账户号");
               $(".accountName").html("账户名");
               $(".bankName").html("开户行名称");

           }else if (checked == '2') {
               $(".selectBank").removeAttr("hidden");
               $(".default").attr("hidden", "hidden");  //参数配置隐藏
           }else if (checked == '0') {
               $(".accountName").html('<span class="required" style="color: red">* </span>姓名');
               $(".accountNo").html('<span class="required" style="color: red">* </span>卡号');
               $(".bankName").html('<span class="required" style="color: red">* </span>银行名称');

               $(".required").removeAttr("hidden");  // 必填*显示
               $(".selectBank").attr("hidden", "hidden");  //参数配置隐藏
               $(".manual").addClass("layui-hide");

               $(".default").removeAttr("hidden");
               $("#bankName").val("").removeAttr("disabled", true);
               $('#accountName').val("").removeAttr("disabled", true);
               $('#accountNo').val("").removeAttr("disabled", true);
               $('#bankNetName').val("").removeAttr("disabled", true);
               $('#city').val("").removeAttr("disabled", true);
               $('#province').val("").removeAttr("disabled", true);
           }
           form.render();
       });

        form.render();

    })
</script>
